<template>
  <!-- 标签创建页面 -->
  <section class="page label-creation">
    <data-form :model="model" :page="pageService" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="代码编号" prop="code">
          <el-input v-model.trim="model.code"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="tagStatus">
          <el-select clearable placeholder="请选择" v-model="model.tagStatus">
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('CommonState')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-input v-model.trim="model.priority"></el-input>
        </el-form-item>
        <el-form-item label="所属组别" prop="systemGroup">
          <el-select clearable placeholder="请选择" v-model="model.systemGroup">
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('SystemGroup')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签性质" prop="property">
          <el-select clearable placeholder="请选择" v-model="model.property">
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('CommonFlag')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否可维护" prop="isMaintain">
          <el-select clearable placeholder="请选择" v-model="model.isMaintain">
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('CommonFlag')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属层级" prop="tagLevel">
          <el-select clearable placeholder="请选择" v-model="model.tagLevel">
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('TagLevel')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维护经办代号" prop="agentName">
          <el-input v-model.trim="model.agentName"></el-input>
        </el-form-item>
        <el-form-item label="复核人代号" prop="reviewerName">
          <el-input v-model.trim="model.reviewerName"></el-input>
        </el-form-item>
        <el-form-item label="维护时间" prop="maintainDate">
          <el-date-picker
            :editable="false"
            clearable
            placeholder="选择日期时间"
            type="daterange"
            v-model="model.maintainDate"
          ></el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="onClickAdd">新增标签</el-button>
      </template>
      <template slot="columns">
        <el-table-column :min-width="$helper.getOperateWidth(2)" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="onClickEdit(scope.row)"
              type="text"
              :disabled="scope.row.applyStatus === 'PENDING'"
              >编辑</el-button
            >
            <el-button @click="onClickDetail(scope.row)" type="text"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          label="代码编号"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="tagStatus"
          show-overflow-tooltip
          label="状态"
          :min-width="$helper.getColumnWidth(3)"
          :formatter="row => $filter.dictConvert(row.tagStatus, 'CommonState')"
        >
        </el-table-column>
        <el-table-column
          prop="priority"
          show-overflow-tooltip
          label="优先级"
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="description"
          show-overflow-tooltip
          label="描述"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="systemGroup"
          show-overflow-tooltip
          label="所属组别"
          :min-width="$helper.getColumnWidth(3)"
          :formatter="
            row => $filter.dictConvert(row.systemGroup, 'SystemGroup')
          "
        >
        </el-table-column>
        <el-table-column
          prop="property"
          label="标签性质"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
          :formatter="row => $filter.dictConvert(row.property, 'CommonFlag')"
        >
        </el-table-column>
        <el-table-column
          prop="isMaintain"
          label="是否可维护"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(5)"
          :formatter="row => $filter.dictConvert(row.isMaintain, 'CommonFlag')"
        >
        </el-table-column>
        <el-table-column
          prop="tagLevel"
          label="所属层级"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
          :formatter="row => $filter.dictConvert(row.tagLevel, 'TagLevel')"
        >
        </el-table-column>
        <el-table-column
          label="过期日"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(5)"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.expireType === "MONTH"
                ? `${scope.row.expirationMonth}月`
                : scope.row.expireType === "DATE"
                ? `${$filter.dateFormat(scope.row.expirationDate)}`
                : "永久"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="agentCode"
          label="维护经办代号"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="maintainDate"
          label="维护时间"
          show-overflow-tooltip
          :formatter="row => $filter.dateTimeFormat(row.maintainDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="reviewerCode"
          label="复核人代号"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="reviewerDate"
          label="复核时间"
          show-overflow-tooltip
          :formatter="row => $filter.dateTimeFormat(row.reviewerDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>

        <el-table-column
          label="审批记录"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
          <template slot-scope="scope">
            <el-button @click="applyDetail(scope.row)" type="text"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </template>
    </data-box>

    <!-- 新增/编辑 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialog.add"
      :title="title"
      :close-on-press-escape="false"
      append-to-body
      @open="$nextTick(() => $refs['add-tag'].dataHandler())"
      width="900px"
    >
      <add-tag
        @close="dialog.add = false"
        :row="row"
        @refreshData="refreshData"
        :isEdit="isEdit"
        :isDetail="isDetail"
        ref="add-tag"
      />
    </el-dialog>

    <!-- 审批记录查看 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialog.logDetail"
      title="标签审批记录"
      :close-on-press-escape="false"
      append-to-body
      @open="$nextTick(() => $refs['log-detail'].refreshData())"
      width="900px"
    >
      <log-detail-label
        @close="dialog.logDetail = false"
        ref="log-detail"
        :row="row"
      />
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import AddTag from "~/components/customer-group-management/add-tag.vue";
import { CustomerGroupManageService } from "~/services/domain-service/customer-group-manage.service";
import LogDetailLabel from "~/components/customer-group-management/log-detail-label.vue";

@Auth(2319)
@Layout("workspace")
@Component({
  components: {
    AddTag,
    LogDetailLabel
  }
})
export default class LabelCreation extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CustomerGroupManageService)
  private customerGroupManageService: CustomerGroupManageService;

  private dataSet: any[] = [];
  private dialog = {
    add: false,
    caseExcelImport: false,
    detail: false,
    logDetail: false
  };

  private caseId: string = "";
  private title = "新增";
  private isEdit = false;
  private row = {};
  private model: any = {
    agentName: "",
    code: "",
    isMaintain: "",
    maintainDate: [],
    priority: "",
    property: "",
    reviewerName: "",
    systemGroup: "",
    tagLevel: "",
    tagStatus: ""
  };
  private isDetail: boolean = false;

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    this.customerGroupManageService
      .findAllTags(this.paramsHandler(), this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private paramsHandler() {
    const params = { ...this.model };
    params.maxMaintainDate = this.$filter.dateRanageFormat(
      this.model.maintainDate
    ).end;
    params.minMaintainDate = this.$filter.dateRanageFormat(
      this.model.maintainDate
    ).start;
    delete params.maintainDate;
    return params;
  }

  /**
   * 新增
   */
  private onClickAdd() {
    this.dialog.add = true;
    this.isEdit = false;
    this.title = "新增";
    this.isDetail = false;
    this.row = {};
  }

  /**
   * 编辑
   */
  private onClickEdit(row) {
    this.dialog.add = true;
    this.row = row;
    this.title = "编辑";
    this.isEdit = true;
    this.isDetail = false;
    this.$nextTick(() => {
      const tag: any = this.$refs["add-tag"];
      tag.getDetailData();
    });
  }

  private onClickDetail(row) {
    this.row = row;
    this.dialog.add = true;
    this.title = "查看";
    this.isEdit = false;
    this.isDetail = true;
    this.$nextTick(() => {
      const tag: any = this.$refs["add-tag"];
      tag.getDetailData();
    });
  }

  private applyDetail(row) {
    this.row = row;
    this.dialog.logDetail = true;
  }
}
</script>

<style lang="less" scoped></style>
